<template>
  <div class="dashboard-container">
    <div class="app-container">
      <card>
        <row>
          <Col span="22"
            ><span style="color=#464c5bfont-size: 12px" :bold="true">学科名称</span>
            <Input v-model="page.subjectName" style="width: 200px; margin-left: 10px" />
            <Button style="margin-left: 10px" @click="removes">清除</Button>
            <Button type="primary" style="margin-left: 10px" @click="btnsearch">搜索</Button></Col
          >
          <Col span="2"> <Button type="success" icon="md-create" @click="showDialog = true">新增学科</Button> </Col>
          <Modal v-model="showDialog" @on-ok="ok" :title="showTitle" :visible="showDialog" @on-cancel="cancel">
            <Form ref="formValidate" :rules="rules" :model="formValidate" :label-width="80">
              <Form-item label="姓名" prop="name">
                <Input v-model="fromData.subjectName" placeholder="请输入姓名"></Input>
              </Form-item>
            </Form>
            <Row>是否显示 <i-switch v-model="fromData.isFrontDisplay" true-color="#ff4949" false-color="#13ce66" /></Row>
          </Modal>
        </row>
        <Alert show-icon>数据一共{{ page.counts }}条</Alert>
        <Table stripe :columns="columns1" :data="list">
          <template slot="btn" slot-scope="{ row }">
            <Button type="text" style="color: #6b9eff" @click="btnclassification(row)">学科分类</Button>
            <Button type="text" style="color: #6b9eff" @click="btndirectory(row)">学科标签</Button>
            <Button type="text" style="color: #6b9eff" @click="btnAdd(row)">修改</Button>
            <Button type="text" style="color: #6b9eff" @click="deleteremove(row)">删除</Button>
          </template>
          <template slot="addDate" slot-scope="{ row }">
            {{ row.addDate | time() }}
          </template>
          <template slot="isFrontDisplay" slot-scope="{row }">
            {{ row.isFrontDisplay ===1 ? '是':'否'}}
          </template>
        </Table>
        <div class="app-container">
          <Row type="flex" justify="end"> <Page :total="total" size="small" show-elevator show-sizer @on-change="changePage" /></Row>
        </div>
      </card>
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { list, remove, add, update, detail } from '@/api/hmmm/subjects'
export default {
  filters: {
    time (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  components: {},
  data () {
    return {
      rules: {
        name: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      list: [],
      total: 0,
      page: {
        page: 1,
        pagesize: 10,
        counts: 0,
        subjectName: ''
      },
      value2: '',
      columns1: [
        {
          title: '序号',
          type: 'index',
          key: 'index'
        },
        {
          title: '学科名称',
          key: 'subjectName'
        },
        {
          title: '创建者',
          key: 'username'
        },
        {
          title: '创建日期',
          slot: 'addDate'
        },
        {
          title: '前台是否显示',
          slot: 'isFrontDisplay',
          key: 'isFrontDisplay'
        },
        {
          title: '二级目录',
          key: 'twoLevelDirectory'
        },
        {
          title: '标签',
          key: 'tags'
        },
        {
          title: '题目数量',
          key: 'totals'
        },
        {
          title: '操作',
          slot: 'btn',
          fixed: 'right',
          width: 340
        }
      ],
      showDialog: false, // 控制新增弹层
      formValidate: {
        name: ''
      },
      fromData: {
        subjectName: ''
      },
      formItem: {
        tagName: '',
        state: ''
      }
    }
  },
  created () {
    this.getList()
  },
  computed: {
    showTitle () {
      return this.fromData.id ? '修改学科' : '新增学科'
    }
  },
  methods: {
    //  获取学科列表 渲染
    async getList () {
      const {
        data: { counts, items }
      } = await list(this.page)
      this.page.counts = counts
      // console.log(items)
      this.list = items
      this.total = counts
    },
    //  点击分页调动数组
    changePage (newPage) {
      this.page.page = newPage
      this.getList()
    },
    // 添加 和修改
    async ok () {
      try {
        await this.$refs.formValidate.validate()
        this.$refs.formValidate.resetFields()
        if (this.fromData.id) {
          await update(this.fromData)
        } else {
          await add(this.fromData)
        }
        this.getList()
        this.showDialog = false
        this.$Message.info('操作成功')
      } catch (error) {
        console.log(error)
      }
    },
    // 清除搜索框
    removes () {
      this.page = {
        subjectName: ''
      }
      this.getList()
    },
    cancel () {
      this.fromData = {
        tagName: '',
        state: ''
      }
      this.$refs.formValidate.resetFields()
      this.showDialog = false
    },
    // 删除
    async deleteremove (id) {
      try {
        await this.$confirm('此操作将永久删除该学科, 是否继续 ?')
        await remove(id)
        this.getList()
        this.$Message.success('删除成功')
      } catch (error) {
        console.log(error)
      }
    },
    //  回写学科名称
    async btnAdd (id) {
      this.showDialog = true
      const { data } = await detail(id)
      console.log(data)
      this.fromData = data
    },
    // 点击跳到目录页面
    btnclassification (row) {
      console.log(row)
      this.$router.push({
        path: '/subjects/directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    // 点击跳转到标签页面
    btndirectory (row) {
      this.$router.push({
        path: '/subjects/tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    //  点击搜索符合条件的学科
    async btnsearch () {
      // 在page定义的subjectName 传入list数组中
      const {
        data: { counts, items, subjectName }
      } = await list(this.page)
      this.page.counts = counts
      this.subjectName = subjectName
      this.list = items
    }
  }
}
</script>

<style scoped lang='less'>
</style>
